<template>
	<div>
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem to="/">首页</BreadcrumbItem>
			    <BreadcrumbItem href="">功能</BreadcrumbItem>
			    <BreadcrumbItem href="/wechat/function/menu">菜单</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
		    	<Row :gutter="16">
		    		<ICol span="8">
		    			<LeftMenu 
		    			:menus="menus"
		    			:clickMenu="choiseMenu"
		    			:clickAddMenu="addMenu"
		    			:clickChild="choiseChild"
		    			:clickAddChild="addChild"
		    			></LeftMenu>
		    		</ICol>
		    		<ICol span="10">
		    			<IForm>
							<div  v-for="(menu,index) in menus" :key="index" >
								<RightForm :form="menu" :index="index" :childindex="-1" :del="del" :up="up" :down="down"></RightForm>
								<RightForm 
								v-for="(child,child_index) in menu.sub_button" 
								:key="child_index" 
								:form="child" 
								:index="index" 
								:childindex="child_index"
								:del="del"
                                :up="up" 
                                :down="down"
								>
		    					</RightForm>
							</div>
		    			</IForm>
		    		</ICol>
		    		<ICol span="6">
		    			<Button v-if="$store.getters.per.wechat_function_menu_update || $store.getters.per.wechat_function_menu_create" type="primary" v-show="menus.length>0" long @click="save">保存</Button>
		    			<br><br>
		    			<Button v-if="$store.getters.per.wechat_function_menu_update" type="success" v-show="menus.length>0 && havesave" long @click="release">发布菜单到微信</Button>
		    		</ICol>
		    	</Row>
		    </div>
		</div>
	</div>
</template>
<script>
	import {Row,Col,Breadcrumb,Form,Button} from 'iview';
	
	import LeftMenu from 'admin/components/wechat/function/menu/left-menu';
	import RightForm from 'admin/components/wechat/function/menu/right-form';

	export default {
		components:{
            Breadcrumb,
            'BreadcrumbItem' : Breadcrumb.Item,
           	Row,
            'ICol':Col,
            LeftMenu,
            RightForm,
            'IForm' : Form,
            Button,
        },
        data () {
            return {
            	menus :[],
            	havesave : false,
            }
        },
        methods:{
            //顺序向上调整
            up(index,childIndex){
                var len = this.menus.length-1;
                if(childIndex==-1){
                    var newindex = index-1;
                    //调整菜单
                    if(newindex<0){
                        newindex = 0;
                    }
                    var realyData = this.menus[index],
                        changeData = this.menus[newindex];
                    this.menus[index] = changeData;
                    this.menus[newindex] = realyData;
                    this.resetCurrent();
                    this.choiseMenu(newindex);
                }else{
                    var sub_button = this.menus[index]['sub_button'],
                        newChildIndex = childIndex-1;
                    if(newChildIndex<0){
                        newChildIndex = sub_button.length-1;
                    }
                    //调整子菜单
                    var realyData = sub_button[childIndex],
                        changeData = sub_button[newChildIndex];
                    this.menus[index]['sub_button'][childIndex] = changeData;
                    this.menus[index]['sub_button'][newChildIndex] = realyData;
                    this.resetChildAllCurrent();
                    this.choiseChild(index,newChildIndex);
                }
                this.$forceUpdate();
            },
            //顺序向下调整
            down(index,childIndex){
                var len = this.menus.length-1;
                if(childIndex==-1){
                    var newindex = index+1;
                    //调整菜单
                    if(newindex>len){
                        newindex = 0;
                    }
                    var realyData = this.menus[index],
                        changeData = this.menus[newindex];
                    this.menus[index] = changeData;
                    this.menus[newindex] = realyData;
                    this.resetCurrent();
                    this.choiseMenu(newindex);
                }else{
                    var sub_button = this.menus[index]['sub_button'],
                        newChildIndex = childIndex+1;
                    if(newChildIndex> sub_button.length-1){
                        newChildIndex = 0;
                    }
                    //调整子菜单
                    var realyData = sub_button[childIndex],
                        changeData = sub_button[newChildIndex];
                    this.menus[index]['sub_button'][childIndex] = changeData;
                    this.menus[index]['sub_button'][newChildIndex] = realyData;
                    this.resetChildAllCurrent();
                    this.choiseChild(index,newChildIndex);
                }
                this.$forceUpdate();
            },
            //发布微信
            release(){
                this.Axios.Wechat.Function.Menu.Release()
                .then(res =>{
                    if(!res) return false;
                })
            },
            //获取菜单数据
            get(){
                this.Axios.Wechat.Function.Menu.Get()
                .then(res =>{
                    if(!res) return false;
                    var data = res.data;
                    this.menus = data;
                })
            },
        	//保存菜单
        	save(){
        		for(var i in this.menus){
    				var error = false,msg = '';
        			var sub_button = this.menus[i]['sub_button'];
        			if(sub_button.length>0){
        				for(var j in sub_button){
        					var error = false,msg = '';
        					if(sub_button[j].name==''){
        						error = true;
        						msg ='请填写菜单名称';
        					}
        					else if(sub_button[j].name.replace(/[^\x00-\xff]/g, '01').length>16){
        						error = true;
        						msg ='菜单名称不超过8个汉字或16个字母';
        					}
        					else if(sub_button[j].menuType=='message' && sub_button[j].keyword_id==0){
        						error = true;
        						msg ='请选择回复的关键词';
        					}
        					else if(sub_button[j].menuType=='link' && sub_button[j].link==''){
        						error = true;
        						msg ='请填写跳转页面地址';
        					}
        					if(error){
        						this.resetCurrent();
                				this.resetChildAllCurrent();
        						this.$Message.error(msg);
        						this.menus[i].sub_show = true;
        						this.menus[i].sub_button[j].current = true;
        						return false;
        					}
        				}
        			}else{
        				if(this.menus[i].menuType=='message' && this.menus[i].keyword_id==0){
							error = true;
							msg ='请选择回复的关键词';
						}
						else if(this.menus[i].menuType=='link' && this.menus[i].link==''){
							error = true;
							msg ='请填写跳转页面地址';
						}
        			}
        			if(this.menus[i].name==''){
						error = true;
						msg ='请填写菜单名称';
					}
					else if(this.menus[i].name.replace(/[^\x00-\xff]/g, '01').length>16){
						error = true;
						msg ='菜单名称不超过8个汉字或16个字母';
					}
					if(error){
						this.resetCurrent();
        				this.resetChildAllCurrent();
						this.$Message.error(msg);
						this.menus[i].current = true;
						this.menus[i].sub_show = true;
						return false;
					}
        		}

        		this.Axios.Wechat.Function.Menu.Update(this.menus)
                .then(res =>{
                    if(!res) return false;
                    this.get();
                    this.havesave = true;
                })
        	},
            //删除菜单数据
            delMenuData(index,childindex,menu_id){
                if(childindex>-1){
                    this.menus[index]['sub_button'].splice(childindex,1);
                }else{
                    this.menus.splice(index,1);
                }
            },
        	//删除菜单
        	del(index,childindex,menu_id){
                if(menu_id>0){
                    this.$Modal.confirm({
                        title: '删除菜单确认',
                        content: '一旦删除,无法撤销',
                        onOk: () => {
                            this.Axios.Wechat.Function.Menu.Del(menu_id)
                            .then(res =>{
                                if(!res) return false;
                                this.get();
                                this.delMenuData(index,childindex,menu_id);
                            })
                        },
                    });
                }else{
                    this.delMenuData(index,childindex,menu_id);
                }
        	},
        	 //重置主菜单选择
            resetCurrent(){
                for(var i in this.menus){
                    this.menus[i].current = false;
                    this.menus[i].sub_show = false;
                }
            },
            //重置子菜单选择
            resetChildCurrent(index){
                for(var i in this.menus[index]['sub_button']){
                    this.menus[index]['sub_button'][i].current = false;
                }
            },
            //重置所有子菜单选择
            resetChildAllCurrent(){
            	for(var i in this.menus){
            		for(var j in this.menus[i]['sub_button']){
            			this.menus[i]['sub_button'][j].current = false;
            		}
            	}
            },
            //选择一个主菜单
            choiseMenu(index){
                this.resetCurrent();
                this.resetChildAllCurrent();
                this.menus[index].current = true;
                this.menus[index].sub_show = true;

            },
            //选择一个子菜单
            choiseChild(index,child_index){
            	this.resetCurrent();
                this.resetChildCurrent(index);
                this.menus[index]['sub_show'] = true;
                this.menus[index]['sub_button'][child_index].current = true;
            },
            //添加一个主菜单
            addMenu(){
                this.menus.push({
                	id : 0,
                	name : '菜单名称' , 
                	current : false,
                    menuType : 'message' , 
                    sub_show : false,
                    sub_button : [],
                    keyword_id : 0,
                    link : '',
                });
                this.resetCurrent();
                this.resetChildAllCurrent();
                this.menus[this.menus.length-1].current = true;
                this.menus[this.menus.length-1].sub_show = true;
            },
            //添加一个子菜单
            addChild(index){
                this.menus[index].sub_button.push({
                	id :0,
                    name : "子菜单名称",
                    current : false,
                    menuType : 'message',
                    sub_button : [],
                    keyword_id : 0,
                    link : '',
                })
                this.resetCurrent();
                this.resetChildCurrent(index);
                this.menus[index]['sub_show'] = true;
                this.menus[index]['sub_button'][this.menus[index]['sub_button'].length-1].current = true;
            },
        },
        created:function(){
            this.get();
        },
        mounted:function(){
            this.$store.dispatch('CHANGE_ROUTE',{name:'自定义菜单',route:'/wechat/function/menu',action:1,closable:true});
        }
	}
</script>